<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :title="title"
    width="40%">
    <el-form ref="treeForm" :model="form" :rules="rules" label-width="160px">
      <el-form-item :label="$t('nodeName')" prop="name">
        <el-input v-model="form.name" :placeholder="`${$t('pleaseInput')}${$t('name')}`"/>
      </el-form-item>
      <el-form-item :label="$t('selectParent')">
        <treeselect
          :options="options"
          :disabled="form.id? true: false"
          v-model="form.parentId"
          :placeholder="`${$t('pleaseSelect')}${$t('selectParent')}`"
          :no-children-text="$t('noMoreData')"
          :no-options-text="$t('noMoreData')"
          :no-results-text="$t('noMoreData')"
        />
      </el-form-item>
      <el-form-item :label="$t('description')">
        <el-input
          :autosize="{ minRows: 2, maxRows: 4}"
          v-model="form.description"
          :placeholder="`${$t('pleaseInput')}${$t('description')}`"
          maxlength="200"
          show-word-limit
          type="textarea"/></el-form-item>
          <!-- <el-form-item :label="$t('isEqpType')">
        <el-switch
          v-model="form.isEqpType"
          :active-value="true"
          :inactive-value="false"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="showEqpStatus"
        />
      </el-form-item> -->
          <!-- <el-form-item v-show="form.isEqpType" :label="$t('notGetAlarmEqpState')" prop="notGetAlarmEqpState">
        <el-select
          v-model="form.notGetAlarmEqpState"
          :style="{width: '100%'}"
          clearable
          filterable
          multiple
        >
          <el-option
            v-for="item in notGetAlarmEqpStateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
    </el-form>
    <span slot="footer">
      <el-button
        icon="el-icon-circle-close"
        @click="handleClose"
      >{{ $t("cancel") }}</el-button>
      <el-button
        type="primary"
        icon="el-icon-receiving"
        @click="doSave"
      >{{ $t("save") }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mySetting from '@/mixins/mySetting'
import { doAddNode, getTreeList, doUpdate } from '@/api/equipment/prodTreeNode'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'RootTreeModel',
  components: { Treeselect },
  mixins: [mySetting],
  data() {
    return {
      notGetAlarmEqpStateList: [],
      dialogVisible: false,
      title: '',
      form: {
        isEqpType: false
      },
      options: [],
      rules: {
        name: [{ required: true, message: `${this.$t('pleaseInput')}${this.$t('nodeName')}`, trigger: 'blur' }]
      }
    }
  },
  methods: {
    async handleOpen(row) {
      if (row && row.id) {
        this.title = this.$t('modify')
        // 修改root节点selecttree回显错误字段
        this.form = Object.assign({}, row, { parentId: row.parentId ? row.parentId : undefined })
      } else {
        this.title = this.$t('add')
      }
      const data = await getTreeList()
      const formatTree = (root) => {
        return (root || []).map(node => {
          const { id, name, children } = node
          return {
            id,
            label: name,
            children: formatTree(children)
          }
        })
      }
      this.options = formatTree(data.data)
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['treeForm'].clearValidate()
      })
      // selectJob.selectitemlist({ name: 'MESEqpStates' }).then((res) => {
      //   this.notGetAlarmEqpStateList = res.data
      // })
    },
    showEqpStatus() {
      this.form.notGetAlarmEqpState = []
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 触发父组件更新
    handleUpdate() {
      this.$emit('initList')
    },
    doSave() {
      this.$refs['treeForm'].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            doUpdate(this.$clearNull({
              name: this.form.name,
              id: this.form.id,
              parentId: this.form.parentId,
              isEqpType: this.form.isEqpType,
              description: this.form.description,
              notGetAlarmEqpState: this.form.notGetAlarmEqpState
            })).then(res => {
              this.$betterTips(res, this.handleUpdate, this.handleClose)
            })
          } else {
            doAddNode(this.$clearNull({
              name: this.form.name,
              parentId: this.form.parentId,
              description: this.form.description,
              isEqpType: this.form.isEqpType,
              notGetAlarmEqpState: this.form.notGetAlarmEqpState
            })).then(res => {
              this.$betterTips(res, this.handleUpdate, this.handleClose)
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .vue-treeselect__input-container{
  display: flex;
  align-items: center;
}
</style>
